<template>
	<view class="">
		<view class="module-tab u-flex u-f-jsb">
			<view class="item u-flex u-f-justify u-f1 fz14 u-font-bold" :class="[current==0?'on':'']" @click="current=0,initData()">
				<image src="../../static/image/zan.png" style="width: 80rpx;height: 80rpx;margin-right: 24rpx;"></image>
				赞
			</view>
			<view class="item u-flex u-f-justify u-f1 fz14 u-font-bold" :class="[current==1?'on':'']" @click="current=1,initData()">
				<image src="../../static/image/xing.png" style="width: 80rpx;height: 80rpx;margin-right: 24rpx"></image>
				收藏
			</view>
			<view class="item u-flex u-f-justify u-f1 fz14 u-font-bold" :class="[current==2?'on':'']" @click="current=2,initData()">
				<image src="../../static/image/msg.png" style="width: 80rpx;height: 80rpx;margin-right: 24rpx"></image>
				评论
			</view>
		</view>
		<view class="p12">
			<view class="">
				<view @click="toInfo(item)" class="u-flex u-f-jsb" style="align-items: flex-start;" v-for="(item,index) in flowList" :key="index">
					<u-avatar size="92" :src="item.userAvatar"></u-avatar>
					<view class="u-flex u-f-jsb bm   pb15 mb15">
					<view class="u-f1 pl12 pr12">
						<view class="u-font-bold fz12">{{item.userName}}</view>
						<view class=" fz12 c9 mt5" v-if="current==0">赞了你的分享<span class="ml10">{{item.createTimeFormat}}</span></view>
						<view class=" fz12 c9 mt5" v-if="current==1">收藏你的分享<span class="ml10">{{item.createTimeFormat}}</span></view>
						<view class=" fz12 c9 mt5" v-if="current==2">评论你的分享<span class="ml10">{{item.createTimeFormat}}</span></view>
						<view class="mt5 fz12" v-if="current==2">{{item.content}}</view>
						
						<view class="u-line-1 fz12 c9 mt10">{{item.title}}</view>
					</view>
					<image :src="item.picUrl" mode="aspectFill" style="width: 136rpx;height: 136rpx;"></image>
					</view>
				</view>
			</view>
			<view class="mt15">
				
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				tabList: [{
					name: '我的分享'
				}, {
					name: '我的收藏'
				}],
				curTab: 1,
				current: 0,
				loadStatus: 'loadmore',
				flowList: [],
				list: []
			}
		},
		onLoad() {
			this.initData()
		},
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			change(e) {
				this.current = e
				this.initData()
			},
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/community/info?id=' + item.communityId
				})
			},

			initData() {
				this.page = 1
				this.flowList = []
				this.getData()

			},
			getData() {
				let api = 'myCommunityLikeList'
				if (this.current == 1) {
					api = "myCommunityCollectList"
				}
				if (this.current == 2) {
					api = "myCommunityReviewList"
				}
				this.$api[api]({
					pageNo: this.page,
					keyword: this.keyword,
					pageSize: 10,
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
		}
	}
</script>

<style>
</style>

<style lang="scss" scoped>
	.user-info {
		width: 232rpx;
		background: rgba(25, 41, 28, 0.05);
	}

	.module-search {
		flex: 1;
		background: rgba(25, 41, 28, 0.05);
	}
	.module-tab{
		padding:12rpx;
		.item{
			border-radius: 16rpx;
			border: 1px solid rgba(25,41,28,0.08);
			margin: 0 12rpx;
			padding: 20rpx;
			&.on{
				border: 1px solid #70B52C;
			}
		}
	}
</style>